<template>
  <div class="treeBox">
  <el-button @click="goBack" type="primary" style="margin-top: 10px; margin-left: 20px;">返回</el-button>

    <!-- <custom-upload></custom-upload> -->
    <vue3-tree-org :data="state.data" center :define-menus="[]" :node-draggable="false" :label-style="state.style"
      :tool-bar="false">
      <template v-slot="{ node }">
        <div class="tree-org-node__text node-label">
          <div>{{ node.label }}</div>
          <el-image class="img" :src="node.$$data.image"></el-image>
        </div>
      </template>
    </vue3-tree-org>
  </div>
</template>

<script lang="ts" setup>

import { reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import "vue3-tree-org/lib/vue3-tree-org.css";
import Vue3TreeOrg2 from 'vue3-tree-org';
const Vue3TreeOrg = Vue3TreeOrg2.Vue3TreeOrg;
import CustomUpload from '@/components/CustomUpload/index.vue'
const state = reactive({
  data: {
    id: 1,
    label: '兰州万象城消费安全责任人',
    image: 'https://i01piccdn.sogoucdn.com/3e590cb60f0ff582',
    children: [
      {
        id: 2,
        pid: 1,
        label: '兰州万象城消费安全管理人',
        image: 'https://i01piccdn.sogoucdn.com/3e590cb60f0ff582',
        test: true,
        children: [
          { id: 6, pid: 2, label: '运营部', image: 'https://i01piccdn.sogoucdn.com/3e590cb60f0ff582' },
          { id: 8, pid: 2, label: '推广部', image: 'https://i01piccdn.sogoucdn.com/3e590cb60f0ff582' },
          { id: 10, pid: 2, label: '客户关系部', image: 'https://i01piccdn.sogoucdn.com/3e590cb60f0ff582' },
          { id: 12, pid: 2, label: '人事行政部', image: 'https://i01piccdn.sogoucdn.com/3e590cb60f0ff582' },
          { id: 14, pid: 2, label: '财务部', image: 'https://i01piccdn.sogoucdn.com/3e590cb60f0ff582' },
          { id: 16, pid: 2, label: '招商组', image: 'https://i01piccdn.sogoucdn.com/3e590cb60f0ff582' },
          { id: 18, pid: 2, label: '信息组', image: 'https://i01piccdn.sogoucdn.com/3e590cb60f0ff582' },
          { id: 20, pid: 2, label: '工程部', image: 'https://i01piccdn.sogoucdn.com/3e590cb60f0ff582' },
          { id: 22, pid: 2, label: '营业部', image: 'https://i01piccdn.sogoucdn.com/3e590cb60f0ff582' },
          { id: 24, pid: 2, label: '安保部', image: 'https://i01piccdn.sogoucdn.com/3e590cb60f0ff582' }
        ]
      }
    ]
  },
  expandAll: true,
  style: {
    background: '#fff',
    color: '#5e6d82'
  }
})
onMounted(() => {
  toggleExpand(state.data, state.expandAll)
})

const toggleExpand = (data, val) => {
  if (Array.isArray(data)) {
    data.forEach((item) => {
      item.expand = val
      if (item.children) {
        toggleExpand(item.children, val)
      }
    })
  } else {
    data.expand = val
    if (data.children) {
      toggleExpand(data.children, val)
    }
  }
}
const userRouter = useRouter()

const goBack =()=>{
console.log(userRouter,"jj")
  userRouter.back()
}

</script>

<style lang="scss" scoped>
.treeBox {
    width: 100%;
    height: 100%;
    :deep(.tree-org-node__content) {
        max-width: 150px;
        .img {
            margin-top: 10px;
            width: 100px;
            height: 100px;
        }
    }
}
</style>
